import{
    HashRouter as Hash,
    BrowserRouter as Histiry,
    Navigate,
    useRoutes,
}from "react-router-dom"

import Login from "./Login/Login"
import { Suspense,lazy } from "react"
import NotFound from "./Errors/NotFound"
import AppIndex from "./App/Index"
import Demo from "./Demo/Demo"
import { MyLoad } from "../components/MyLoad"
import { MyRoutes } from "./Mys/router"
import NewsDetail from "./News/NewsDetail"

const Reg = lazy(()=>import('./Login/Reg'))
const BadService = lazy(()=>import('./Errors/BadService'))
const FindPass = lazy(()=>import('./Login/FindPass'))

const Home  = lazy(()=>import('./App/Home'))
const Find  = lazy(()=>import('./App/Find'))
const Mine  = lazy(()=>import('./App/Mine'))
const News  = lazy(()=>import('./App/News'))
const City = lazy(()=>import('./City/City'))
const Search = lazy(()=>import('./Search/Search'))
const Guide = lazy(()=>import('./Guide/Guide'))

export const LayoutRouter = () => {
    return(
        <Hash>
            <Suspense fallback={<MyLoad/>}>
                <MainRouter/>
            </Suspense>
        </Hash>
    )
}

export const MainRouter = () => {
    return useRoutes([
        {
            path:"/",
            element:<Navigate to="/guide"/>
        },
        {
            path:"/guide",
            element:<Guide/>    
        },
        {
            path:"/app",
            element:<AppIndex/>,
            children:[  //嵌套路由
                { path:"/app", element:<Navigate to="/app/home"/> },
                { path:"/app/home", element:<Home/> },
                { path:"/app/find", element:<Find/> },
                { path:"/app/mine", element:<Mine/> },
                { path:"/app/news", element:<News/> },
            ]   
        },
        {
            path:"/city",
            element:<City/>
        },
        {
            path:"/demo",
            element:<Demo/>
        },
        {
            path:"/search",
            element:<Search/>
        },
        {
            path:"/login",
            element:<Login/>
        },
        {
            path:"/reg",
            element:<Reg/>
        },
        {
            path:"/new-detail/:id",
            element:<NewsDetail/>
        },
        {
            path:"/findpass",
            element:<FindPass/>
        },
        {
            path:"/503",
            element:<BadService/>
        },
        {
            path:"/404",
            element:<NotFound/>
        },
        {
            path:"*",
            element:<Navigate to='/404'/>,
        },
        ...MyRoutes
    ])
}